<template>
  <div>
    <button @click="minus" :disabled="currentVal <= min">-</button>
    <input type="text" :value="currentVal" @change="handleChange" />
    <button @click="add" :disabled="currentVal >= max">+</button>
  </div>
</template>
<script>
export default {
  props: {
    // 这里只能取value名字，不能叫其他名字，因为父组件中用了v-model
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: -Infinity,
    },
    max: {
      type: Number,
      default: Infinity,
    },
  },
  data() {
    return {
      // 这句话只能执行一次，如果父组件的count值改变了，会导致属性props value的改变，但是currentVal不会改变了，所以需要watch一下value
      currentVal: this.value,
    };
  },
  methods: {
    minus() {
      if (this.currentVal <= this.min) return;
      this.currentVal -= 1
    },
    add() {
      if (this.currentVal === this.max) return;
      this.currentVal += 1
    },
    handleChange(e) {
      // 注意数据类名是数字，注意边界条件
      let v = +e.target.value;
      if (v <= this.min) {
        v = this.min
      }
      if (v >= this.max) {
        v = this.max
      }
      // 设置input框的dom的value
      e.target.value = v
      // 更新父组件count的值，count值变化，会导致value变化，value变化会导致currentVal变化
      // 这里emit的事件名称也只能是input
      this.$emit("input", v);
    },
  },
  watch: {
    // 监听value属性的变化，实际上是在监听父组件count值的变化，count变化会导致value变化，value变化会导致currentVal变化
    value(newval) {
      this.currentVal = newval;
    },
    // 监听currentVal变化，currentVal变化，让父组件的count也变化
    currentVal(newval) {
      this.$emit("input", newval);
    },
  },
  created() {
    // 组件创建完成后，里面对传递过来的数据做判断，判断是否超过边界，如果超过了，必须重置为边界值
    if (this.currentVal <= this.min) {
      this.currentVal = this.min;
    }
    if (this.currentVal >= this.max) {
      this.currentVal = this.max;
    }
  },
};
</script>
<style>
</style>